<!-- 页面 -->
<template>
  <div>
    <el-tabs type="card" @tab-click="handleTabClick">
      <el-tab-pane
        :key="item.name"
        v-for="item in editableTabs"
        :label="item.title"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
    <el-table :data="paginatedData" border style="width: 100%" class="center-table">
      <el-table-column prop="name" label="漏洞名称" align="center"> </el-table-column>
      <el-table-column prop="createTime" label="漏洞时间" align="center"> </el-table-column>
      <el-table-column prop="frameType" label="漏洞类型" align="center"> </el-table-column>
      <el-table-column prop="desc" label="漏洞简介" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.desc" placement="top">
            <span class="ellipsis-cell">{{ scope.row.desc }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="version" label="漏洞版本" align="center"> </el-table-column>
      <el-table-column prop="useDesc" label="漏洞说明" align="center"> 
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.useDesc" placement="top">
            <span class="ellipsis-cell">{{ scope.row.useDesc }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="operSystem" label="操作系统" align="center">
      </el-table-column>
      <el-table-column prop="installDesc" label="安装说明" align="center">
        <template #default="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.installDesc" placement="top">
            <span class="ellipsis-cell">{{ scope.row.installDesc }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<!--vue -->
<script>
import { conditionTool } from "@/api/condition/index.js";
export default {
  //存放数据
  data() {
    return {
      paginatedData: [],
      editableTabs: [
        { title: "初始化访问", name: "1", content: "初始化访问" },
        { title: "执行", name: "2", content: "执行" },
        { title: "持续深入", name: "3", content: "持续深入" },
        { title: "提权", name: "4", content: "提权" },
        { title: "破防", name: "5", content: "破防" },
        { title: "权限访问", name: "6", content: "权限访问" },
        { title: "信息收集", name: "7", content: "信息收集" },
        { title: "横向渗透", name: "8", content: "横向渗透" },
        { title: "收集取证", name: "9", content: "收集取证" },
        { title: "命令和控制", name: "10", content: "命令和控制" },
        { title: "数据泄露", name: "11", content: "数据泄露" },
        { title: "影响", name: "12", content: "影响" },
      ],
    };
  },
  //生命周期函数
  mounted() {},
  //调用方法
  methods: {
    handleTabClick(tab) {
      const tabData = this.editableTabs.find((item) => item.name === tab.name);

      if (tabData.content) {
        console.log("tabData:", tabData.content);
        conditionTool(tabData.content).then((res) => {
          // 可根据需要处理返回结果
          this.paginatedData = res.data;
          console.log("conditionTool response:", res);
          
          console.log("conditionTool response:", this.paginatedData);
        });
      }
    },
  },
  //监听器
  watch: {},
  //计算属性
  computed: {},
  //过滤器
  filters: {},
  //自定义指令
  directives: {},
};
</script>
<!-- css样式 -->
<style scoped lang="scss">
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}
.search-input {
  flex: 1;
  max-width: 300px;
  background-color: #131313 !important;
}
::v-deep .el-tabs__nav .el-tabs__item {
  color: #fff !important;
}

::v-deep .el-tabs__header {
  background: #181818;
  border-bottom: 1px solid #222;
  border-radius: 8px 8px 0 0;
  padding: 0 2px;
  /* 移除滚动条 */
}

::v-deep .el-tabs__nav {
  background: #181818;
  border-radius: 8px 8px 0 0;
  display: flex;
  flex-wrap: nowrap;
  /* 移除滚动条 */
  width: 100%;
}

::v-deep .el-tabs__item {
  color: #bbb !important;
  background: #232323 !important;
  border-radius: 6px 6px 0 0 !important;
  margin-right: 2px !important;
  transition: background 0.2s, color 0.2s;
  font-weight: 500;
  font-size: 12px; // 再小一点
  padding: 4px 8px !important; // 再小一点
  min-width: 0 !important;
  max-width: 102px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex: 1 1 0;
  text-align: center;
}

::-webkit-scrollbar {
  display: none !important;
}

::v-deep .el-tabs__item.is-active {
  color: #fff !important;
  background: #111 !important;
  border-bottom: 2px solid #409eff !important;
}

::v-deep .el-tabs__item:hover {
  color: #fff !important;
  background: #222 !important;
}

::v-deep .el-tabs__active-bar {
  background: #409eff !important;
  height: 2px !important;
  border-radius: 2px;
}
.ellipsis-cell {
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}
.center-table {
  border-radius: 10px;
}
</style>
